<template>
  <div class="container">
    <el-card>
      <!-- 头部搜索 -->
      <el-row type="flex" justify="center">
        <el-col :span="20">
          <el-form :inline="true" ref="subjectRef" :model="parameter" label-width="80px">
            <el-form-item label="学科名称" prop="subjectName">
              <el-input v-model="parameter.subjectName" size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="cleanBtn">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="searchBtn">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
            <el-button type="success" icon="el-icon-edit" size="small" @click="openDialog">新增学科</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 显示条数 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false" style="margin-bottom: 20px" />
      <!-- 表格 -->
      <template>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="tabStyle" :row-style="trStyle">
          <el-table-column label="序号" width="48" type="index"> </el-table-column>
          <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column label="创建日期" width="160">
            <template #default="{ row }">
              {{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示">
            <template #default="{ row }">
              {{ isFrontDisplay[row.isFrontDisplay] }}
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录"> </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column label="操作" width="240">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="toDirectorys(row.id, row.subjectName)">学科分类</el-button>
              <el-button type="text" size="small" @click="toTags(row.id, row.subjectName)">学科标签</el-button>
              <el-button type="text" size="small" @click="openEditDialog(row.id)">修改</el-button>
              <el-button type="text" size="small" @click="delSubjects(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="parameter.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="parameter.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 学科弹窗 -->
    <subjects-add :dialogVisible="dialogVisible" :curId="curId" @dialogClose="dialogClose" @getSubjectList="getSubjectList"></subjects-add>
    <!-- <el-dialog :title="curId ? '修改学科' : '新增学科'" :visible="dialogVisible" width="400px" @close="dialogClose" @open="dialogOpen">
      <el-form :model="ruleForm" :rules="rules" ref="dialogRef" label-width="80px" class="demo-ruleForm" :label-position="left">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="ruleForm.subjectName" placeholder="请输入学科名称"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch v-model="ruleForm.isFrontDisplay" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="okBtn">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import SubjectsAdd from '../components/subjects-add'
import dayjs from 'dayjs'
export default {
  components: {
    SubjectsAdd
  },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 表格头样式
      tabStyle: {
        background: '#fafafa',
        borderBottom: '2px solid #e8e8e8'
      },
      // 表格行样式
      trStyle: {
        height: '67px'
      },
      // 分页参数
      parameter: {
        page: 1,
        pagesize: 10,
        subjectName: '' //学科名称
      },
      // 总条数
      total: 0,
      // 是否显示前台的映射
      isFrontDisplay: {
        1: '是',
        0: '否'
      },
      // 控制弹窗显示
      dialogVisible: false,
      // 点击的id
      curId: ''
    }
  },
  created() {
    this.getSubjectList()
  },
  methods: {
    // 获取学科列表
    async getSubjectList() {
      const res = await list(this.parameter)
      this.total = res.data.counts
      this.tableData = res.data.items
    },
    handleSizeChange(size) {
      this.parameter.pagesize = size
      this.getSubjectList()
    },
    handleCurrentChange(page) {
      this.parameter.page = page
      this.getSubjectList()
    },
    // 格式化时间
    formatDate(val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 清除
    cleanBtn() {
      this.$refs.subjectRef.resetFields()
    },
    // 搜索
    searchBtn() {
      this.parameter.page = 1
      this.getSubjectList()
    },
    // 打开弹窗
    openDialog() {
      this.dialogVisible = true
    },
    // 打开编辑弹窗
    openEditDialog(id) {
      this.dialogVisible = true
      this.curId = id
    },
    // 关闭弹窗
    dialogClose() {
      this.dialogVisible = false
      this.curId = ''
    },
    // 删除学科
    delSubjects(id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove(id)
          console.log(res)
          this.$message.success('删除成功')
          this.getSubjectList()
        })
        .catch(() => {})
    },
    // 跳转目录
    toDirectorys(id, name) {
      this.$router.push({
        path: 'directorys',
        query: {
          id,
          name
        }
      })
    },
    // 跳转标签
    toTags(id, name) {
      this.$router.push({
        path: 'tags',
        query: {
          id,
          name
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 0 10px;
  margin: 10px 0;
  ::v-deep .el-pagination__jump {
    margin-left: 0px;
  }
}
</style>
